<template>
  <div>
    <!-- 输入框 -->
    <template id="souSuo" class="clearFloat">
      <el-input
        class="sousuokuang"
        v-model="phone"
        placeholder="请输入电话查询"
        clearable
        @input="change($event)"
        >搜索</el-input
      >
      <el-button type="primary" class="sousuoBtn" @click="chaxunyuangong"
        >查询<i class="iconfont iconsousuo1"></i
      ></el-button>
      <el-button class="chongzhi" type="danger" @click="chongzhi"
        >重置<i class="iconfont iconzhongzhi"></i
      ></el-button>
      <el-button @click="xintianjia" style="float: left" type="success"
        >添加<i class="iconfont icontianjia"></i
      ></el-button>
    </template>
    <!-- //新增员工 -->
    <el-dialog title="新增员工信息" :visible.sync="dialogFormVisible1">
      <el-form :model="addyuangong">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input
            v-model="addyuangong.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            v-model="addyuangong.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input
            v-model="addyuangong.nickname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="addyuangong.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="quedinxinzeng">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改按钮 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.id" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input
            v-model="form.username"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedinxiugai">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 员工表 -->
    <el-table :data="yuangongfenye" height="350" border style="width: 100%">
      <el-table-column align="center" prop="id" label="编号"> </el-table-column>
      <el-table-column align="center" prop="username" label="账号">
      </el-table-column>
      <el-table-column prop="username" label="员工" min-width="80">
      </el-table-column>
      <el-table-column prop="password" label="密码" min-width="80">
      </el-table-column>
      <el-table-column prop="register_time" label="注册时间" min-width="160">
      </el-table-column>
      <el-table-column
        align="center"
        prop="password"
        label="密码"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="nickname"
        label="昵称"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="phone"
        label="联系电话"
      ></el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="danger" @click="delUser(scope.row)"
            >删除<i class="iconfont iconshanchu1"></i
          ></el-button>
          <el-button type="primary" @click="chengeUser(scope.row)"
            >修改<i class="iconfont iconxiugai"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="dangqianye"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="yuangongtableData.length"
    >
    </el-pagination>
  </div>
</template>
<script> 
// import api from '../utils/api'
import storage from '../utils/storage.js'
import * as api from '../utils/api'
export default {
  name: 'user',
  data() {
    return {
      // 分页
      dangqianye: 1,
      // 每页4条
      elpage: 4,
      // 查询
      phone: '',
      // 渲染页面
      yuangongtableData: [],
      // 新增弹框
      dialogTableVisible1: false,
      dialogFormVisible1: false,

      addyuangong: {
        username: '',
        password: '',
        nickname: '',
        phone: '',
      },
      // 修改方法
      formLabelWidth: '120px',
      dialogFormVisible: false,
      form: {
        id: "",
        username: '',
        password: '',
        nickname: '',
        email: '',
        phone: '',
      },
    }
  },
  //翻页处理方法 
  computed: {
    yuangongfenye() {
      let yuangong = this.yuangongtableData.slice((this.dangqianye - 1) * this.elpage, this.dangqianye * this.elpage)
      return yuangong
    }
  },
  created() {
    //查询的
    this.chaxun()
  },
  methods: {
    change(e) {
      this.$forceUpdate();
    },
    //分页方法
    handleSizeChange(val) {
      this.elpage = val
    },
    handleCurrentChange(val) {
      this.dangqianye = val
    },
    // 查询方法
    chaxun() {
      this.axios({
        url: api.GET_SELECTALLUSER,
        method: 'get'
      }).then(data => {
        this.yuangongtableData = data.data.data
      })
    },
    delUser(row) {
      // console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios({
          method: 'post',
          url: api.POST_DELETEUSERBYLD,
          data: {
            id: row.id
          }
        }).then(data => {
          // console.log(data)
          if (data.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.chaxun()
          } else {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          }
        })
      })
    },
    //修改的处理方法
    chengeUser(row) {
      this.dialogFormVisible = true
      this.form.id = row.id
      this.form.username = row.username
      this.form.password = row.password
      this.form.nickname = row.nickname
      // this.form.email=row.email
      this.form.phone = row.phone
    },
    //确定修改的函数
    quedinxiugai() {
      this.dialogFormVisible = false
      this.axios({
        url: api.POST_UPDATEUSERBYID,
        method: 'post',
        data: this.form
      }).then(data => {
        console.log(data)
        this.chaxun()
        if (data.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '信息有误',
            type: 'error'
          });
        }
      })
    },
    //新增员工
    xintianjia() {
      this.dialogFormVisible1 = true
    },
    quedinxinzeng() {
      this.dialogFormVisible1 = false
      this.axios({
        url: api.POST_ADDUSER,
        method: 'post',
        data: this.addyuangong
      }).then(data => {
        if (data.data.code == 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '添加失败，账号已存在',
            type: 'error'
          })
        }
        this.chaxun()
        for (let item in this.addyuangong) {
          this.addyuangong[item] = ''
        }
      })
    },
    // 查询
    chaxunyuangong() {
      this.axios({
        url: api.GET_SELECTUSERBYPHONE,
        method: 'get',
        params: {
          phone: this.phone
        }
      }).then(data => {
        console.log(data)
        this.yuangongtableData = data.data.data
        // this.chaxun()
      })
    },
    // 重置方法
    chongzhi() {
      this.chaxun()
    }
  }
}
</script>
<style scoped lang="less">
.sousuokuang {
  width: 300px;
  float: left;
  overflow: hidden;
}
.sousuoBtn,
.xinzenBtn,
.chongzhi {
  float: left;
  overflow: hidden;
}
</style>
